<template>
  <div :class="{'section-viewer-edit': mode === STATUS.EDIT}" class="section-viewer">
    <div class="section-center">
      <div v-if="mode === STATUS.EDIT" class="side-view">
        <a
          v-for="item in components"
          :key="item.text"
          :title="item.text"
          @click="handleAddViewer(item)"
          class="view-item d-text-gray d-text-linker"
        >
          <component :is="item.icon" />
        </a>
      </div>
      <div class="content-view">
        <Container
          v-for="item in section.items"
          :key="item.id"
          :mode="mode"
          :config="section.config"
          @onRemove="handleRemove(item)">
          <component
            :is="item.component"
            v-model="item.content"
            :config="item.config"
            :mode="mode"
          />
        </Container>
        <div v-if="!section.items || !section.items.length" class="d-container-focus">
          <span>点击左部组件添加内容</span>
        </div>
      </div>
    </div>
    <div class="d-bar-drawer">
      <a @click="handleSave" class="d-btn d-btn-primary">保存</a>
      <!--<a @click="handleSaveTemplate" class="d-btn d-btn-primary">保存为模板</a>-->
      <a v-if="mode === STATUS.EDIT" @click="handlePreview" class="d-btn d-btn-default">预览</a>
      <a v-else @click="handleEdit" class="d-btn d-btn-default">编辑</a>
      <a :href="getMicroPath('#/section/list')" class="d-btn d-btn-default">返回</a>
    </div>
  </div>
</template>

<script>
import { strer } from '@daelui/dogjs/dist/components'
import { STATUS } from '@daelui/dogjs/dist/constant'
import secSer from '../../service/action/section.action'
import { ComponentIcon, TextIcon, HtmlIcon, FunctionIcon, PropIcon, HeadIcon, TableIcon, CodeIcon } from '@daelui/vdog/dist/icons'
import { Dialoger } from '@daelui/vdog/dist/components'
import { Container, TextViewer, HeadViewer, HtmlViewer, CodeViewer, PropViewer, MethodViewer, GridViewer } from '@daelui/vdog/dist/viewer'
import { zh as locale } from '@daelui/dogjs/dist/locale'

export default {
  components: {
    TextIcon,
    HtmlIcon,
    FunctionIcon,
    PropIcon,
    HeadIcon,
    TableIcon,
    CodeIcon,
    ComponentIcon,
    Container,
    TextViewer,
    HeadViewer,
    GridViewer,
    HtmlViewer,
    CodeViewer,
    PropViewer,
    MethodViewer
  },

  data () {
    return {
      STATUS,
      mode: STATUS.RENDER,
      // 组件列表
      components: [
        {text: '标题', icon: 'HeadIcon', component: 'HeadViewer'},
        {text: '纯文本', icon: 'TextIcon', component: 'TextViewer'},
        {text: 'HTML', icon: 'HtmlIcon', component: 'HtmlViewer'},
        {text: '表格', icon: 'TableIcon', component: 'GridViewer'},
        {text: '代码', icon: 'CodeIcon', component: 'CodeViewer'},
        {text: '属性', icon: 'PropIcon', component: 'PropViewer'},
        {text: '方法', icon: 'FunctionIcon', component: 'MethodViewer'},
        {text: '组件', icon: 'ComponentIcon', component: 'ComponentViewer'}
      ],
      section: {
        name: '',
        items: [], // 节点列表
        config: {} // 配置
      }
    }
  },

  methods: {
    /**
     * @function 添加视图器
    */
    handleAddViewer (item) {
      // 组件视图
      if (item.component === 'ComponentViewer') {
        let items = [
          {
            id: strer.utid(),
            component: 'HeadViewer',
            content: '组件名称',
            config: {layout: {placeholder: '', level: 'h2'}}
          },
          {
            id: strer.utid(),
            component: 'HtmlViewer',
            content: '组件描述',
            config: {layout: {placeholder: '组件描述'}}
          },
          {
            id: strer.utid(),
            component: 'CodeViewer',
            content: '组件示例',
            config: {layout: {placeholder: '组件示例'}}
          },
          {
            id: strer.utid(),
            component: 'TextViewer',
            content: '属性/方法/事件/插槽',
            config: {layout: {placeholder: '属性/方法/事件/插槽'}}
          },
          {
            id: strer.utid(),
            component: 'HeadViewer',
            content: '属性',
            config: {layout: {placeholder: '', level: 'h3'}}
          },
          {
            id: strer.utid(),
            component: 'GridViewer',
            content: [],
            config: {
              layout: {placeholder: '属性表格'},
              columns: [
                {field: 'name', label: '名称', width: '180px'},
                {field: 'description', label: '说明'},
                {field: 'type', label: '类型', width: '100px'},
                {field: 'default', label: '默认值', width: '160px'}
              ]
            }
          },
          {
            id: strer.utid(),
            component: 'HeadViewer',
            content: '方法',
            config: {layout: {placeholder: '', level: 'h3'}}
          },
          {
            id: strer.utid(),
            component: 'GridViewer',
            content: [],
            config: {
              layout: {placeholder: '方法表格'},
              columns: [
                {field: 'name', label: '名称', width: '180px'},
                {field: 'description', label: '说明'},
                {field: 'params', label: '参数', width: '160px'},
                {field: 'type', label: '返回类型', width: '100px'}
              ]
            }
          },
          {
            id: strer.utid(),
            component: 'HeadViewer',
            content: '事件',
            config: {layout: {placeholder: '', level: 'h3'}}
          },
          {
            id: strer.utid(),
            component: 'GridViewer',
            content: [],
            config: {
              layout: {placeholder: '事件表格'},
              columns: [
                {field: 'name', label: '名称', width: '180px'},
                {field: 'description', label: '说明'},
                {field: 'params', label: '参数', width: '160px'}
              ]
            }
          },
          {
            id: strer.utid(),
            component: 'HeadViewer',
            content: '插槽',
            config: {layout: {placeholder: '', level: 'h3'}}
          },
          {
            id: strer.utid(),
            component: 'GridViewer',
            content: [],
            config: {
              layout: {placeholder: '插槽表格'},
              columns: [
                {field: 'name', label: '名称', width: '180px'},
                {field: 'description', label: '说明'}
              ]
            }
          },
          {
            id: strer.utid(),
            component: 'PropViewer',
            content: '属性说明与示例',
            config: {layout: {placeholder: '属性说明与示例'}}
          },
          {
            id: strer.utid(),
            component: 'MethodViewer',
            content: '方法说明与示例',
            config: {layout: {placeholder: '方法说明与示例'}}
          }
        ]
        this.section.items = this.section.items.concat(items)
        return true
      }
      this.section.items.push({
        id: strer.utid(),
        component: item.component,
        content: '',
        config: {layout: {}}
      })
    },

    /**
     * @function 删除视图器
    */
    handleRemove (node) {
      this.section.items = this.section.items.filter(item => {
        return item.id !== node.id
      })
    },

    /**
     * @function 保存
    */
    handleSave () {
      let data = {}
      for (let key in this.section) {
        let value = this.section[key]
        if (value && typeof value === 'object') {
          value = JSON.stringify(value)
        }
        data[key] = value
      }
      // 请求服务
      let defer = null
      if (this.mode === STATUS.ADD) {
        defer = secSer.addItem(data)
      } else {
        defer = secSer.editItem(data)
      }
      defer.then(res => {
        if (res.success) {
          Dialoger.success(locale.action.success)
        } else {
          Dialoger.danger(locale.action.fail)
        }
      })
    },

    /**
     * @function 保存为模板
    */
    handleSaveTemplate () {
      let data = {}
      for (let key in this.section) {
        let value = this.section[key]
        if (value && typeof value === 'object') {
          value = JSON.stringify(value)
        }
        data[key] = value
      }
      // 请求服务
      let defer = null
      if (this.mode === STATUS.ADD) {
        defer = secSer.addItem(data)
      } else {
        defer = secSer.editItem(data)
      }
      defer.then(res => {
        if (res.success) {
          Dialoger.success(locale.action.success)
        } else {
          Dialoger.danger(locale.action.fail)
        }
      })
    },

    /**
     * @function 预览
    */
    handlePreview () {
      this.mode = STATUS.RENDER
    },

    /**
     * @function 编辑
    */
    handleEdit () {
      this.mode = STATUS.EDIT
    },

    /**
     * @function 初始化视图
    */
    initView () {
      let id = this.$route.params.id
      if (id) {
        secSer.queryItem({ id }).then(res => {
          this.renderView(res.data)
        })
      } else {
        this.mode = STATUS.ADD
        this.renderView(null)
      }
    },

    /**
     * @function 渲染视图
    */
    renderView (data) {
      if (!data || !data.id) {
        data = {
          id: strer.utid(),
          name: '',
          // 节点列表,
          items: [],
          config: {} // 配置
        }
      }
      if (typeof data.items === 'string' && /\[/.test(data.items)) {
        data.items = JSON.parse(data.items)
      }
      if (typeof data.config === 'string' && /\{/.test(data.config)) {
        data.config = JSON.parse(data.config)
      }
      // 无配置
      if (!data.items.length) {
        data.items = []
      }
      this.section = data
    }
  },

  mounted () {
    this.initView()
  }
}
</script>

<style lang="less" scoped>
.section-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  &.section-viewer-edit {
    background: #f2f2f7;
  }
  .section-center {
    flex: 1;
    display: flex;
  }
  /deep/.d-viewer-container-edit {
    min-height: 34px;
    height: auto;
    background: #fff;
    border-radius: 4px;
  }
  .side-view {
    padding: 4px 0;
    width: 36px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    & + .content-view {
      margin-left: 8px;
    }
    .view-item {
      display: block;
      height: 32px;
      text-align: center;
      line-height: 26px;
      font-weight: 700;
      font-size: 20px;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
    }
  }
  .content-view {
    flex: 1;
    padding-bottom: 52px;
  }
}
.d-viewer-container {
  margin-bottom: 8px;
}
.d-container-focus {
  color: #999;
  background: #fff;
}
.section-title {
  padding: 6px 8px;
  min-height: 34px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #666;
  border-radius: 4px;
  text-align: center;
}
.d-form-title,.section-title {
  font-weight: 700;
}
</style>

<style lang="less">
.d-viewer-container {
  &:first-child {
    .d-h1,.d-h2,.d-h3,.d-h4,.d-h5,.d-h6 {
      margin-top: 0;
    }
  }
}
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: #e0e0e0;
}
</style>
